<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>list</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/bootstrap.css" media="all">
	<link href="css/bootstrap-responsive.css" rel="stylesheet">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.js"></script>
	<style>
	 html,
     body {
        height: 100%; 
      }
     #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -60px;padding-top: 30px;

      }
      #push,
	 #footer {
        height: 60px;
      }
      #footer {
        background-color: #EEEEEE;
      }

      /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        #footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }
      .container {
        width: auto;
        max-width: 980px;
      }
      .container .credit {
        margin: 20px 0;
      }
</style>
</head>
<body>
	<div id="wrap">
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">
					<div class="navbar navbar-inverse navbar-fixed-top">
						<div class="navbar-inner">
							<div class="container-fluid">
								<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</a>
								<a href="#" class="brand">ProJect</a>
								<div class="nav-collapse collapse navbar-responsive-collapse">
									<ul class="nav">
										<li class="active">
											<a href="index.html">Home</a>
										</li>
										<li>
											<a href="post.html">Link</a>
										</li>
										<li>
											<a href="list.html">Link</a>
										</li>
										<li class="dropdown">
											<a data-toggle="dropdown" class="dropdown-toggle" href="#">
												Dropdown <strong class="caret"></strong>
											</a>
											<ul class="dropdown-menu">
												<li>
													<a href="#">Action</a>
												</li>
												<li>
													<a href="#">Another action</a>
												</li>
												<li>
													<a href="#">Something else here</a>
												</li>
												<li class="divider"></li>
												<li class="nav-header">Nav header</li>
												<li>
													<a href="#">Separated link</a>
												</li>
												<li>
													<a href="#">One more separated link</a>
												</li>
											</ul>
										</li>
									</ul>
									<ul class="nav pull-right">
										<li>
											<a href="#">Link</a>
										</li>
										<li class="divider-vertical"></li>
										<li class="dropdown">
											<a data-toggle="dropdown" class="dropdown-toggle" href="#">
												Dropdown <strong class="caret"></strong>
											</a>
											<ul class="dropdown-menu">
												<li>
													<a href="#">Action</a>
												</li>
												<li>
													<a href="#">Another action</a>
												</li>
												<li>
													<a href="#">Something else here</a>
												</li>
												<li class="divider"></li>
												<li>
													<a href="#">Separated link</a>
												</li>
											</ul>
										</li>
									</ul>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span2">
					<!--Sidebar content-->
					<div class="affix">
						<ul class="nav nav-list">
							<li class="active ">
								<a href="#"> <i class="icon-home icon-white"></i>
									首页
								</a>
							</li>
							<li>
								<a href="#"> <i class="icon-book"></i>
									Library
								</a>
							</li>
							<li>
								<a href="#">
									<i class="icon-pencil"></i>
									Applications
								</a>
							</li>
							<li>
								<a href="#">
									<i class="i"></i>
									Misc
								</a>
							</li>

						</ul>
						<form class="navbar-search pull-left">
							<input type="text" class="span12 search-query" placeholder="Search"></form>
					</div>
				</div>
				<div class="span7">
					<ul>
						<li>
							<h2 contenteditable="true">标题</h2>
							<p contenteditable="true">
								本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.
							</p>
							<p>
								<a class="btn" contenteditable="true" href="#">查看更多 &raquo;</a>
							</p>
						</li>
						<li>
							<h2 contenteditable="true">标题</h2>
							<p contenteditable="true">
								本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.
							</p>
							<p>
								<a class="btn" contenteditable="true" href="#">查看更多 &raquo;</a>
							</p>
						</li>
						<li>
							<h2 contenteditable="true">标题</h2>
							<p contenteditable="true">
								本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.
							</p>
							<p>
								<a class="btn" contenteditable="true" href="#">查看更多 &raquo;</a>
							</p>
						</li>
						<li>
							<h2 contenteditable="true">标题</h2>
							<p contenteditable="true">
								本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.
							</p>
							<p>
								<a class="btn" contenteditable="true" href="#">查看更多 &raquo;</a>
							</p>
						</li>
						<li>
							<h2 contenteditable="true">标题</h2>
							<p contenteditable="true">
								本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.
							</p>
							<p>
								<a class="btn" contenteditable="true" href="#">查看更多 &raquo;</a>
							</p>
						</li>
						<li>
							<h2 contenteditable="true">标题</h2>
							<p contenteditable="true">
								本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.
							</p>
							<p>
								<a class="btn" contenteditable="true" href="#">查看更多 &raquo;</a>
							</p>
						</li>
						<li>
							<h2 contenteditable="true">标题</h2>
							<p contenteditable="true">
								本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.
							</p>
							<p>
								<a class="btn" contenteditable="true" href="#">查看更多 &raquo;</a>
							</p>
						</li>
					</ul>
					<div class="pagination pagination-centered">
						<ul contenteditable="true">
							<li>
								<a href="#">上一页</a>
							</li>
							<li>
								<a href="#">1</a>
							</li>
							<li>
								<a href="#">2</a>
							</li>
							<li>
								<a href="#">3</a>
							</li>
							<li>
								<a href="#">4</a>
							</li>
							<li>
								<a href="#">5</a>
							</li>
							<li>
								<a href="#">6</a>
							</li>
							<li>
								<a href="#">7</a>
							</li>
							<li>
								<a href="#">8</a>
							</li>
							<li>
								<a href="#">9</a>
							</li>
							<li>
								<a href="#">下一页</a>
							</li>
						</ul>
					</div>

				</div>
				<div class="span3">
					<div class="tabbable" id="tabs-920400">
						<!-- Only required for left/right tabs -->
						<ul class="nav nav-tabs">
							<li class="active">
								<a href="#panel-396973" data-toggle="tab" contenteditable="true">第一部分</a>
							</li>
							<li class="">
								<a href="#panel-113289" data-toggle="tab" contenteditable="true">第二部分</a>
							</li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane active" id="panel-396973" contenteditable="true">
								<p>第一部分内容.</p>
							</div>
							<div class="tab-pane" id="panel-113289" contenteditable="true">
								<p>第二部分内容.</p>
							</div>
						</div>
					</div>

					<dl class="dl-horizontal" contenteditable="true">
						<dt>Rolex</dt>
						<dd>劳力士创始人为汉斯.威尔斯多夫，1908年他在瑞士将劳力士注册为商标。</dd>
						<dt>Vacheron Constantin</dt>
						<dd>始创于1775年的江诗丹顿已有250年历史，</dd>
						<dd>是世界上历史最悠久、延续时间最长的名表之一。</dd>
						<dt>IWC</dt>
						<dd>创立于1868年的万国表有“机械表专家”之称。</dd>
						<dt>Cartier</dt>
						<dd>卡地亚拥有150多年历史，是法国珠宝金银首饰的制造名家。</dd>
					</dl>

				</div>
			</div>
		</div>
		<div id="push"></div>
	</div>
	<div id="footer">
		<div class="container">
			<p class="muted credit">
				Example courtesy
				<a href="http://martinbean.co.uk">Martin Bean</a>
				and
				<a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>
				.自定义bootstrap foot
			</p>
		</div>
	</div>
</body>
</html>